<template>
   <div class="c_content">
        <div class="c_swiper">
            <img src="@/assets/img/qt-p1-3.png" alt="">
            <img src="@/assets/img/qt-p1-4.png" alt="">
        </div>
        <div class="c_customization w1080">
            <div class="c_customization_lf">
                <ul>
                    <li :class="{'current': item.id === index}" v-for="item in list" :key="item.id" @click="index=item.id"><a href="javascript:;"><img :src="'https://www.kymid.com/testphp/public/'+item.image" alt="">{{item.name}}</a></li>
                </ul>
            </div>
            <div class="c_customization_rt">
                <div :class="{'c_item': item.id === index}" v-for="item in list" :key="item.id">
                   <p v-html="item.content"></p>
                </div>
            </div>
        </div>
   </div>
</template>
<style>
.w1080 {
    width: 1080px;
    margin: 0 auto;
}
.c_swiper {
    width: 100%;
}
.c_swiper img{
    width: 100%;
    height: auto;
}
.c_customization {
    display: flex;
    justify-content: space-between;
}
.c_customization_lf{
    width: 28%;
}
.c_customization_lf ul li{
    margin: 16px 0;
    line-height: 42px;
    text-align: left;
}
.c_customization_lf ul li a {
    display: block;
    font-size: 14px;
}
.c_customization_lf ul li img{
   width: 38px;
   height: 38px;
   margin-right: 10px;
}
.c_customization_lf ul li a:hover {
    color: #6d9a1e;
}
.c_customization_lf ul .current a{
    color: #6d9a1e;
}
.c_customization_rt {
   text-align: left;
    display: block;
    width: 72%;
}
.c_customization_rt .c_item h2 {
    color: #000;
    text-align: center;
    margin: 20px 0;
    font-weight: 400;
}
.c_customization_rt .c_item p{
    font-size: 16px;
    text-indent: 2em;
    color: #000;
    line-height: 30px;
}
.c_customization_rt .c_item {
    display: block;
}
.c_customization_rt div{
    display: none;
}
</style>
<script setup>
import { getCurrentInstance, ref } from 'vue'
const list = ref(null)
  const { proxy } = getCurrentInstance()
  const index = ref(2)
  console.log(index.value)
  proxy.$http.get('https://www.kymid.com/testphp/public/index.php/api/apis/customized').then(val => {
    list.value = val.data.msg
    console.log(val)
  })
</script>
